<template>
  <div>
    <a-alert
      message="选择需要发起调查的研发部、部门、应用清单，系统将批量发送调查待办给相关负责人。"
      type="info"
      show-icon
    />
    <a-form layout="inline">
      <a-form-item>
        <div style="font-weight: 700; font-size: 16px; color: #333333">
          选择应用范围
        </div>
      </a-form-item>
      <div style="float: right">
        <a-form-item>
          <a-select
            default-value="按应用"
            style="width: 200px"
            @change="handleChange"
          >
            <a-select-option value="1"> 按应用 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-select
            default-value="筛选"
            style="width: 72px"
            @change="handleChange"
          >
            <a-select-option value="1"> 筛选 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input-search
            placeholder="请输入"
            style="width: 206px"
            @search="onSearch"
          />
        </a-form-item>
      </div>
    </a-form>
    <standard-table
      :infoShow="false"
      :size="'middle'"
      :selectedRows.sync="selectedRows"
      :columns="columns"
      :dataSource="dataSource"
      @clear="onClear"
      @change="onChange"
      :bordered="true"
      :pagination="false"
      :scroll="{ y: 700 }"
      @selectedRowChange="onSelectChange"
    />
    <div class="cus-footer">
      <a-button @click="nextStep" style="margin-right: 16px">保存</a-button>
      <a-button style="margin-right: 16px" @click="prevStep">上一步</a-button>
      <a-button type="primary" @click="finish">提交</a-button>
    </div>
  </div>
</template>

<script>
// import { request } from "@/utils/request";
import Mock from "mockjs";
import StandardTable from "@/components/table/StandardTable";

const columns = [
  {
    title: "应用简称",
    dataIndex: "nickName",
    width: 120,
  },
  {
    title: "应用名称",
    dataIndex: "appName",
    width: 120,
  },
  {
    title: "联系人",
    dataIndex: "contact",
    width: 120,
  },
  {
    title: "应用所属部门",
    dataIndex: "depart",
    width: 120,
  },
  {
    title: "应用标签",
    dataIndex: "tag",
  },
];

const dataSource =
  Mock.mock({
    "list|8-12": [
      {
        "key|+1": 0,
        "nickName|1": ["F-ACIS", "F-CCPS", "F-CEBS", "F-ECIS"],
        appName: "这是应用名称",
        "contact|1": ["张三", "李四", "王五", "燕六"],
        "depart|1": ["系统二部", "应用支持三部", "应用支持一部"],
        "tag|1": ["2024年信创", "2023年信创", "2025年信创"],
      },
    ],
  })?.list ?? [];
export default {
  name: "Step3",
  components: {
    StandardTable,
  },
  data() {
    return {
      columns,
      selectedRows: [],
      dataSource,
    };
  },
  methods: {
    prevStep() {
      console.log(this.dataSource);

      this.$emit("prevStep");
    },
    finish() {
      this.$emit("finish");
    },
    handleChange() {
      console.log("change");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onSelectChange() {
      this.$message.info("选中行改变了");
    },
    // getData() {
    //   console.log(1222);

    //   request(process.env.VUE_APP_API_BASE_URL + "/appList", "get").then(
    //     (res) => {
    //       const { list } = res?.data?.data ?? {};
    //       return list;
    //     }
    //   );

    //   return [];
    // },
  },
};
</script>

<style scoped></style>
